// base
import Taro, { Component } from '@tarojs/taro'
import { View, Image, Button } from '@tarojs/components'
// less
import './index.less'
import { navigateTo, switchTab } from '../../../../crossplatform/apiservice/navigate'
import pagejumplist from '../../../../configuration/pagejumplist.json'
import If from '../../../../components/page-components/if'
import scaleImageSrc from '../../../../util/pagemethods/scaleImageSrc'
import { avaterOld } from '../../../../configuration/staticimg'
import { showToast } from '../../../../crossplatform/apiservice/toast'
import tool from '../../../../util/tool'

class JobTopDetail extends Component {
  static defaultProps = {
    detail: {}
  }
  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentDidShow() {
    // onshow
  }

  componentDidHide() {
    // onhide
  }

  componentWillUnmount() {
    // onUnload
  }

  delay(time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }
  favoritebtnClick = tool.throttle(() => {
    Taro.vibrateShort()
    const {
      detail: { collectionId },
      userId
    } = this.props
    console.log(this.props, 'collectionId')
    if (userId) {
      if (collectionId) {
        this.onEscAix()
      } else {
        this.insertPost()
      }
    } else {
      // 用户没登陆
      showToast({
        title: '请先登录'
      })
      setTimeout(() => {
        switchTab({
          url: `${pagejumplist['self-center'].path}`
        })
      }, 500)
    }
  })
  insertPost = () => {
    Taro.vibrateShort()
    const { userId, detail } = this.props
    this.props.onInsertPost({ postId: detail.id, userId })
  }

  onEscAix = () => {
    Taro.vibrateShort()
    const {
      detail: { collectionId }
    } = this.props
    this.props.onEscAix({ collectionId })
  }

  gotocpdetail = tool.throttle(() => {
    const { detail, hasCompanyHome } = this.props
    if (detail.companyId && hasCompanyHome) {
      Taro.vibrateShort()
      navigateTo({
        url: `${pagejumplist['company-homepage'].path}?id=${detail.companyId}`
      })
    } else {
    }
  })

  render() {
    const { detail, role, hasCompanyHome } = this.props

    return (
      <View className="JobTopDetail_id00706">
        <If visible={role !== 'company'}>
          <View className="btns-wrap">
            <View className="btn-bg">
              <Image
                className="share-img"
                src="https://imagesize.hrwork.com/sp/files/5fbe70d4-90ca-487d-9b4f-98d1e2099484.png"
              />
              <Button OpenType="share" className="share-btn" />
            </View>
            <View
              className={`btn-bg ${detail.collectionId ? 'btn-bg-active' : ''}`}
              onClick={this.favoritebtnClick}
            >
              <Image
                className="favorite-img"
                src={
                  detail.collectionId
                    ? 'https://imagesize.hrwork.com/sp/files/1a28894c-7f27-41de-82cc-1fdf888a7269.png'
                    : 'https://imagesize.hrwork.com/sp/files/764eb966-d76a-4aba-a60b-aa32bba4d204.png'
                }
              />
            </View>
          </View>
        </If>
        <View className="titlewrap">
          <View className="title">{detail.jobname}</View>
        </View>
        <View className="pricewrap">
          <View className="price">{detail.jobprice || ''}</View>
          <View className="unit">{detail.priceunit || ''}</View>
        </View>
        <View className="tagswrap">
          {detail.locations[0] && (<View key={index} className="tagssingle">
            {detail.locations[0]}
          </View>)}
          {detail.type && detail.education && (
            <View className="tagssingle">{detail.education}</View>
          )}
          {!detail.type && detail.settlementMethod && (
            <View className="tagssingle">{detail.settlementMethod}</View>
          )}
          {detail.jobTags.map((data, index) => {
            return (
              <View key={index} className="tagssingle">
                {data}
              </View>
            )
          })}
        </View>
        <View className="countwrap">
          <Image
            className="count-view"
            src="https://imagesize.hrwork.com/sp/files/61f1a894-42c8-4dd1-b717-9a8447e1948f.png"
          />
          <View className="count-txt">{detail.viewCount || 0}</View>
          <Image
            className="count-entry"
            src="https://imagesize.hrwork.com/sp/files/0e805468-68eb-4d0b-992a-7384225c526c.png"
          />
          <View className="count-txt">{detail.entryCount || 0}</View>
          <Image
            className="count-collection"
            src="https://imagesize.hrwork.com/sp/files/023356c2-dd7b-4371-99a9-0846f15f5348.png"
          />
          <View className="count-txt">{detail.collectionCount || 0}</View>
          <Image
            className="count-resume"
            src="https://imagesize.hrwork.com/sp/files/b47dae9d-2cb9-4b95-b1a7-abdaa3a2a9fc.png"
          />
          <View className="count-txt">{detail.resumeCount || 0}</View>
        </View>
        <View className="companywrap" onClick={this.gotocpdetail}>
          <If visible={detail}>
            <Image
              mode="aspectFill"
              className="imagels"
              src={scaleImageSrc(detail.companyLogo) || avaterOld}
            />
          </If>
          <View className="company-txt-wrap">
            <View className="companytitle">{detail.simpleName || detail.companyName}</View>
            <View className="companyposts">{detail.postCount}个职位</View>
          </View>
          <If visible={hasCompanyHome}>
            <Image
              src="https://imagesize.hrwork.com/sp/files/2167012f-1497-44ee-b480-1fa460e80143.png"
              className="triangle_white"
            />
          </If>
        </View>
      </View>
    )
  }
}

export default JobTopDetail
